<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card>
          <div id="main" style="height: 300px;color: #616161">
            <div>分类</div>
            <div class="content">
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>


            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card>
          <el-carousel :interval="3000">
            <el-carousel-item v-for="(item,index) in imgs" :key="index">
              <img :src="item" alt="" style="width: 100%;border-radius: 10px">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card>
          <div id="main" style="height: 300px;color: #616161">
            <div>分类</div>
            <div class="content">
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">女装 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">内衣 / </a>
              </div>
              <div class="item" style="margin-top: 10px">
                <a href="#">奢侈品 </a>
              </div>

            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <div style="margin: 20px 0">
      <!--      gutter 间距-->
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 10px">

          <div style="padding-bottom: 10px; border: 1px solid #ccc; border-radius: 10px; overflow: hidden">
            <img :src="item.img" alt="" style="width: 100%; cursor: pointer"
                 @click="$router.push('/front/goodsPlusDetail?id=' + item.id)">
            <div style="color: #666; padding: 5px; font-size: 18px; cursor: pointer"
                 @click="$router.push('/front/goodsPlusDetail?id=' + item.id)"><b>{{ item.name }}</b></div>
            <div style="color: #666; padding: 5px; font-size: 14px">{{ item.description }}</div>
            <div style="color: #666; padding: 5px; font-size: 14px; color: orangered">¥ {{ item.price }}</div>
            <!--            <div style="padding: 10px">-->
            <!--              <el-button type="primary">购买</el-button>-->
            <!--            </div>-->
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "frontHome",
  data() {
    return {
      imgs: [
        '//imgcps.jd.com/ling-cubic/ling4/lab/amZzL3QxLzExNzY0NS84LzMzNTI2LzEwNzE3NS82M2FhY2EwYUZkYWFlZGZhYS8yZjRhOGYwMTI2ZThmNjEzLnBuZw/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/1635183047968657409/cr/s/q.jpg',
        'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/1521796/FocusFullshop/CkNqZnMvdDEvMjIxODIyLzIwLzI0NTk5LzIzNjk3LzY0ZDNjNjc2RjU4M2I4Y2E0L2UyYTFkOTQ1ZjU5OTc1ODEucG5nEgkzLXR5XzBfNTQwAjjvi3pCGQoV6IO9546H54eD5rCU54Ot5rC05ZmoEAFCEAoM55ub5oOg54us5LqrEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG5LyY6YCJEAdYhPFc/cr/s/q.jpg',
        'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100053926124/FocusFullshop/CkJqZnMvdDEvMTg5Mjg5LzcvMzY2MDYvNjkyMzcvNjRkM2IyYjdGNmZlMDg1MTUvMmJjZTAyOWIyYzI0NWY3NC5wbmcSCTUtdHlfMF81NjACOO6LekITCg_mtbflsJTnrJTorrDmnKwQAUIRCg3np5LmnYDku7cyNzk4EAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG5Yqb6I2QEAdY7IG33fQC/cr/s/q.jpg',
        'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000367/1521796/FocusFullshop/CkNqZnMvdDEvMjIxODIyLzIwLzI0NTk5LzIzNjk3LzY0ZDNjNjc2RjU4M2I4Y2E0L2UyYTFkOTQ1ZjU5OTc1ODEucG5nEgkzLXR5XzBfNTQwAjjvi3pCGQoV6IO9546H54eD5rCU54Ot5rC05ZmoEAFCEAoM55ub5oOg54us5LqrEAJCEAoM56uL5Y2z5oqi6LStEAZCCgoG5LyY6YCJEAdYhPFc/cr/s/q.jpg',
        'https://imgcps.jd.com/ling-cubic/ling4/lab/amZzL3QxLzYyMTk2LzE0LzI0Mzc3LzIzMTU4OC82NGMwYjc1N0Y0YWE2ZjZjOC8wMGI4Mjc5ZjU5ZjRiNzJjLnBuZw/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/1635183142485970946/cr/s/q.jpg'
      ],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      name: "",
      form: {},
    }
  },
  created() {
    // 获取后台的商品数据
    this.load()
  }
  ,
  methods: {
    load() {
      //加载2条数据
      this.request.get("/goodsPlus/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    }
    ,
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.load();
    }
    ,
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.load();
    }
    ,
  }
}
</script>

<style scoped>
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
//background-color: skyblue;
}

.content .item {
  flex: 0 0 calc((100% - 10px) / 3);
  height: 20px;
//background-color: pink;
}
.content .item a{
  color: #616161;
  text-decoration:none;
}
.content .item a:hover{
  color: orangered;
}
</style>